<template>
  <view class="basket">
    <uv-navbar title="果篮" placeholder bgColor="#FFE49D" leftIconSize="0"></uv-navbar>
    <view class="basket-menu" v-if="carList && carList.length>0">
      <uv-swipe-action>
        <view v-for="(item, index) in carList" :key="index">
          <uv-swipe-action-item @click="handleRemove(index, index2)" :show="show" :options="options" v-for="(item2, index2) in item.list" :key="index2">
            <view class="basket-menu-list">
              <image class="selectImg" @click="handleClick(index,index2)"
                :src="item2.checked?'../../static/images/selectActive.png':'../../static/images/select.png'" mode="">
              </image>
              <image class="goodsImg" :src="item2.product.image" mode=""></image>
              <view class="goodsInfo">
                <view class="goodName text-twoline-ellipsis">
                  {{item2.product.store_name}}
                </view>
                <view class="info-tb">
                  <view class="price">
                    ￥{{item2.product.price}}
                  </view>
                  <uv-number-box v-model="item2.cart_num" @change="(e)=>handleAddNumber(e,index,index2)"></uv-number-box>
                </view>
              </view>
            </view>
          </uv-swipe-action-item>
        </view>
      </uv-swipe-action>
    </view>
    <uv-empty  v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>
    <view class="footer">
      <view class="footer-warpper">
        <view class="fl" @click="handleToggle">
          <image class="selectImg"
            :src="selectAll?'../../static/images/selectActive.png':'../../static/images/select.png'" mode=""></image>
          <text class="allSelect">全选</text>
        </view>
        <view class="fr">
          <text class="txt1">共{{selectGoodsList.length}}件</text>
          <text class="totalAmount">
            ￥{{totalaMount}}
          </text>
          <view class="toPay" @click="handleBalance">
            去结算
          </view>
        </view>
      </view>
    </view>
    <uv-modal ref="modal" title="确认删除吗？" :showCancelButton="true" content='' @confirm="confirm"></uv-modal>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  import tools from "../../utils/index.js"
  export default {
    data() {
      return {
        selectAll: false,
        carList: [],
        totalaMount: 0,
        selectGoodsList: [],
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#f56c6c'
          }
        }],
        cart_id: [],
        show: false
      }
    },
    onShow() {
      this.getList();
    },
    methods: {
      handleRemove(index,index2){
        console.log("删除", index, index2);
        this.cart_id.push(this.carList[index].list[index2].cart_id);
        this.$refs.modal.open();
      },
      confirm(){
        reqApi.deleteCar({cart_id:this.cart_id}).then(res=>{
          this.show = false;
          uni.showToast({
            title: "删除成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          setTimeout(()=>{
            this.getList();
          }, 1500)
        })
      },
      // 结算
      handleBalance() {
        if (this.selectGoodsList.length == 0) {
          uni.showToast({
            title: "请选择商品",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          return
        } else {
          let cart_id = this.selectGoodsList.map(v => v.cart_id);
          console.log("下单cart_ids", cart_id);
          uni.navigateTo({
            url: `/pages/home/placeOrder?cart_id=` + encodeURIComponent(cart_id)
          })
          this.selectAll = false;
          this.carList = [];
          this.totalaMount = 0;
          this.selectGoodsList = [];
        }

      },
      handleAddNumber(e, index, index2) {
        setTimeout(() => {
          console.log(e.value, index, index2);
          this.selectGoodsList = [];
          if (this.carList[index].list[index2].checked) {
            this.summaryTotal();
          }
          let temp = {
            id: this.carList[index].list[index2].cart_id,
            cart_num: e.value
          }
          reqApi.editCount(temp).then(res => {
            console.log("修改购物车数量");
          })
        }, 500)
      },
      handleClick(index, index2) {
        this.selectGoodsList = [];
        this.carList[index].list[index2].checked = !this.carList[index].list[index2].checked;
        console.log("carList", this.carList);
        this.carList.forEach(v => {
          this.selectAll = v.list.every(q => {
            return q.checked == true;
          });
        })
        console.log("selectAll", this.selectAll);
        this.summaryTotal();
      },
      summaryTotal() {
        this.carList.forEach(v => {
          v.list.forEach(q => {
            if (q.checked) {
              this.selectGoodsList.push(q);
            }
          })
        })
        console.log("选中的商品集合", this.selectGoodsList);
        this.totalaMount = 0;
        console.log("开始计算价格");
        this.selectGoodsList.forEach(v => {
          this.totalaMount = tools.accAdd(this.totalaMount, tools.accMul(v.product.price, v.cart_num));
        })
      },
      getList() {
        reqApi.carList({}).then(res => {
          console.log("购物车列表", res.data.list);
          res.data.list.forEach(v => {
            v.list.forEach(q => {
              q.checked = false;
            })
          })
          this.carList = res.data.list;
        })
      },
      handleToggle() {
        this.selectAll = !this.selectAll;
        if (this.selectAll) {
          this.carList.forEach(v => {
            v.list.forEach(q => {
              q.checked = true;
            })
          })
        } else {
          this.carList.forEach(v => {
            v.list.forEach(q => {
              q.checked = true;
            })
          })
        }
        this.summaryTotal();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .footer {
    position: fixed;
    // bottom: 100rpx;
    bottom: 0;
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    background: #fff;
    .footer-warpper {
      display: flex;
      justify-content: space-between;

      .fl {
        display: flex;
        align-items: center;

        .selectImg {
          width: 30rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }

        .allSelect {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #222222;
        }
      }

      .fr {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1;

        .txt1 {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #222222;
        }

        .totalAmount {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #FF4F44;
          margin: 0 20rpx;
        }

        .toPay {
          width: 200rpx;
          height: 80rpx;
          background: #FF4F44;
          border-radius: 20rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 32rpx;
          color: #FFFFFF;
          text-align: center;
          line-height: 80rpx;
        }
      }
    }

  }

  .basket {
    background: #fff;
    width: 100vw;
	  height: calc( 100vh - 88rpx );
    .basket-menu {
      padding: 30rpx;
      box-sizing: border-box;

      .basket-menu-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;
        padding: 30rpx;
        box-sizing: border-box;

        .selectImg {
          width: 32rpx;
          height: 32rpx;
        }

        .goodsImg {
          width: 160rpx;
          height: 160rpx;
          border-radius: 20rpx;
          margin: 0 20rpx;
        }

        .goodsInfo {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          flex: 1;
          height: 160rpx;

          .goodName {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #222222;
          }

          .info-tb {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .price {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #FF4F44;
            }
          }
        }
      }
    }
  }
</style>